<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>板块管理</title>
    <link rel='stylesheet' href='<%- rootUrl %>/node_modules/font-awesome/css/font-awesome.min.css' />
    <link rel='stylesheet' href='<%- rootUrl %>/res/htree.css' />
    <style>
        .body-margin {margin:24px 5%;}
        .width-limit {max-width: 1200px;margin: 0 auto}
        #site-block2 {border:1px solid gainsboro; padding:6px}
        #site-block2 .htree-node {border-bottom:1px solid gainsboro}
        #site-block2 .htree-node > input[type=text] {cursor:pointer}
        #site-block2 .htree-node > div {font-size:small;padding:0 12px;border-left:1px solid gainsboro}
    </style>
    <script src="<%- rootUrl %>/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="<%- rootUrl %>/res/htree.js"></script>
</head>
<body class="body-margin">
<div class="width-limit">
    <h3>管理站点板块</h3>
    <b>最简树目录</b>
    <button id="addRootBtn" style="margin:6px"><i class="fa fa-plus"></i>&nbsp;添加根节点</button>
    <div id="site-block" class="htree-root"></div>
    <br/>
    <br/>
    <b>经典树目录</b>
    <button id="addRootBtn2" style="margin:6px"><i class="fa fa-plus"></i>&nbsp;添加根节点</button>
    <div id="site-block2" class="htree-root"></div>
</div>
<script>
    $(function(){
        // 最简树目录
        let tree = new HTree();
        let rootNode =$('#site-block');
        $('#addRootBtn').click(function(){ tree.appendChild() });

        let node0 = tree.appendChild(rootNode, '男生专场');
        node0 = tree.appendChild(rootNode, '女生专场');
        let node1 = tree.appendChild(node0, '交流区');
        let node2 = tree.appendChild(node1, '情感交流');
        let node3 = tree.appendChild(node2, '情侣关系');
        node3 = tree.appendChild(node2, '夫妻关系');
        node3 = tree.appendChild(node2, '婆媳关系');
        node3 = tree.appendChild(node2, '亲子关系');
        let node4 = tree.appendChild(node3, '婴幼儿');
        node4 = tree.appendChild(node3, '童年期');
        node4 = tree.appendChild(node3, '青春期');
        node2 = tree.appendChild(node1, '经典教学');
        node1 = tree.appendChild(node0, '灌水区');
        node2 = tree.appendChild(node1, '谈天说地');
        node0 = tree.appendChild(rootNode, '家长专场');


        // 经典树目录
        let icons = [ '<i class="fa fa-globe"></i>', '<i class="fa fa-sitemap"></i>', '<i class="fa fa-folder-o"></i>', '<i class="fa fa-file-o"></i>', '<i class="fa fa-th-large"></i>' ];
        let tree2 = new HTree({
            newNodeText:'未命名',
            checkbox:true,
            checkboxRecursive:true,
            beforeAdd: (e) => { e.tree.option.icon = icons[e.tree.getLevel(e.parentList)] },
            afterAdd: (e) => {
                // 禁止删除
                if (e.tree.getLevel(e.newNode) < 3)
                    e.newNode.children('i.fa-trash-o').css('visibility', 'hidden');

                // 添加节点内容
                if (e.tree.getLevel(e.newNode) === 4)
                    e.newNode.children('input[type=text]:first')
                        .after('<div>今日访客(0)&emsp;评论数(0)</div>');
                if (e.tree.getLevel(e.newNode) === 5)
                    e.newNode.children('input[type=text]:first')
                        .after('<div>今日访客(0)&emsp;评论数(0)</div>')
                        .after('<div><a href="#">进入页面</a></div>');

                // 禁止再添加子节点
                if (e.tree.getLevel(e.newNode) === 5)
                    e.newNode.children('span.fa-stack').css('visibility', 'hidden');
            },
            // 删除确认
            beforeDelete: (e) => { return confirm("是否确认删除"); },

            // 禁止重命名
            beforeRename: (e) => { return e.tree.getLevel(e.node)>3; }
        });
        let rootNode2 = $('#site-block2');
        $('#addRootBtn2').click(function(){ tree2.appendChild(rootNode2) });

        let paths = [
            '男生专场',
            '女生专场',
            '家长专场',
            '女生专场/灌水区',
            '女生专场/交流区',
            '女生专场/灌水区/谈天说地',
            '女生专场/交流区/情感交流',
            '女生专场/交流区/经典教学',
            '女生专场/交流区/情感交流/情侣关系',
            '女生专场/交流区/情感交流/夫妻关系',
            '女生专场/交流区/情感交流/婆媳关系',
            '女生专场/交流区/情感交流/亲子关系',
            '女生专场/交流区/情感交流/亲子关系/婴幼儿',
            '女生专场/交流区/情感交流/亲子关系/童年期',
            '女生专场/交流区/情感交流/亲子关系/青春期',
        ];
        tree2.createByPaths(rootNode2, paths);
    });
</script>
</body>
</html>